import React, { Component } from 'react'

export default class Tab extends Component {
    state = {
        list: ["语文", "数学", "英语"],
        count: 0
    }
    changeCount = (count) => {
        this.setState({
            count
        })
    }
    render() {
        const { list, count } = this.state
        return (
            <div>
                <ul className='oul'>
                    {
                        list.map((item, index) => {
                            return <li className={ index === count? 'active': '' }
                                       onClick = { () => {
                                           this.changeCount(index)
                                       }}
                                       key = {index}>
                                { item }
                            </li>
                        })
                    }
                </ul>
                <h2>
                    { list[count] }
                </h2>
            </div>
        )
    }
}
